<!DOCTYPE html>
<html>
<head>
	<title>4-6 在Vue中使用插槽(slot)</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<!-- 
		为什么有 slot,因为有时子组件需要向父组件传递一段 dom 结构
		方式一:<div>{{content}}</div>
		方式二:<div v-html="this.content"></div>
		方式三:<template v-html="this.content"></template>
		这三种都不行

	 -->
	 <div id='root'>
	 	<!-- 假设主组件要传递的内容很多时,下面这种就很不友好和很不好维护了 -->
	 	<!-- <child content="<p>father-html</p><p>father-html</p><p>father-html</p><p>father-html</p><p>father-html</p><p>father-html</p><p>father-html</p><p>father-html</p><p>father-html</p><p>father-html</p>"></child> -->
	 	<!-- 
			使用 slot :
			 <slot>默认值</slot>
	 	
	 	 <child>
	 	 	往子组件里插入一段html 
	 	 	<p>I'm fatherHtml</p>
	 	 </child>
	 	-->

	 	<father-transfer>
	 		<!-- <div class="header" slot='header'>I'm header</div> -->
	 		<div class="footer" slot='footer'>I'm Footer</div>
	 	</father-transfer>


	 </div>
	 <script type="text/javascript">
	 	// Vue.component('child',{	
	 	// 	template:`<div>
	 	// 				<p>I'm SonHtml</p>
	 	// 				<slot></slot>			
	 	// 	</div>`
	 	// })
	 	
	 	Vue.component('father-transfer',{
	 		template:`<div>
	 					  <slot name='header'><h1>I'm header</h1></slot>
	 					  <div class='main-content'>I'm main content</div>
	 					  <slot name='footer'></slot>
	 				  </div>`
	 	})


	 	var vm = new Vue({
	 		el:'#root'
	 	})
	 </script>
</body>
</html>